<template>
	<div class="DrawerPicker">
		<base-drawer :ok-handler="okHandler" :cancel-handler="cancelHandler" v-model:visible="open" :destroy-on-close="true" :title="'选择' + type" :width="500" get-container="body">
			<template #drawerContent>
				<div class="drawerContent">
					<template v-if="type == panes[0]">
						<MemberPicker
							ref="memberPicker"
							:show-selected-user="showSelectedUser"
							v-model:members="_members"
							:showCheckBox="showCheckBox"
							:multiple="multiple"
							:search-key="memberPickerStr"
							@selectedMembers="selectedMembersHandler"
						/>
					</template>
					<template v-if="type == panes[1]">
						<DeptPicker v-model:depts="_depts" :showCheckBox="showCheckBox" :multiple="multiple" :search-key="deptPickerStr" @selectedDeptNodes="selectedDeptNodes" />
					</template>
					<template v-if="type == panes[2]">
						<RolePicker v-model:roles="_roles" :showCheckBox="showCheckBox" :multiple="multiple" :search-key="rolePickerStr" @selectedRoles="selectedRoles" />
					</template>
				</div>
			</template>
		</base-drawer>
	</div>
</template>
<script setup name="DrawerPicker" lang='ts'>
	import BaseDrawer from '@/components/BaseDrawer/BaseDrawer'
	import MemberPicker from '@/components/MemberPicker/MemberPicker'
	import DeptPicker from '@/components/DeptPicker/DeptPicker'
	import RolePicker from '@/components/RolePicker/RolePicker'
	let emits = defineEmits({
		'update:visible': undefined,
		ok: undefined,
		cancel: undefined
	})
	let props = defineProps({
		//人员 部门 岗位
		type: {
			type: String,
			default: undefined
		},
		multiple: {
			type: Boolean,
			default: false
		},
		showCheckBox: {
			type: Boolean,
			default: false
		},
		visible: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: () => {}
		},
		showSelectedUser: {
			type: Boolean,
			default: () => false
		}
	})
	let memberPickerStr = ref('')
	let deptPickerStr = ref('')
	let rolePickerStr = ref('')
	let _members = ref([])
	let _depts = ref([])
	let _roles = ref([])
	let open = computed({
		get: () => {
			return props.visible
		},
		set: (val) => {
			emits('update:visible', val)
		}
	})
	let panes = ref(['人员', '部门', '岗位'])
	let memberPicker = ref()
	const setMembersSelectedLoading = (val) => {
		setTimeout(() => {
			memberPicker.value.loadSelectedMembers = val
		}, 100)
	}
	const clear = () => {
		_members.value = []
		_depts.value = []
		_roles.value = []
	}
	const setMembers = (values) => {
		_members.value = values
	}
  const setDepts = (values) => {
    _depts.value = values
  }
  const setRoles = (values) => {
    _roles.value = values
  }
	const okHandler = () => {
		open.value = false
		emits('ok', {
			data: {
				members: _members.value,
				depts: _depts.value,
				roles: _roles.value
			}
		})
		clear()
	}
	const cancelHandler = () => {
		open.value = false
		emits('cancel')
		clear()
	}
	const selectedMembersHandler = (val) => {}
	const selectedDeptNodes = (val) => {}
	const selectedRoles = (val) => {}
	defineExpose({ setMembers, setMembersSelectedLoading,setDepts,setRoles })
</script>
<style scoped lang="less">
	.DrawerPicker {
	}
</style>
